<template>
	<div class="tabbar">
		<tabbar_item path="/home">
				<template v-slot:img1>
					<img src="@/assets/img/tabbar/首页.png" alt="">
				</template>
				<template v-slot:img2>
					<img src="@/assets/img/tabbar/首页1.png" alt="">
				</template>
				<template v-slot:titel>
					<div>首页</div>
				</template>
		</tabbar_item>
			<tabbar_item path="/sort">
					<template v-slot:img1>
						<img src="@/assets/img/tabbar/分类.png" alt="">
					</template>
					<template v-slot:img2>
						<img src="@/assets/img/tabbar/分类1.png" alt="">
					</template>
					<template v-slot:titel>
						<div>分类</div>
					</template>
			</tabbar_item>
				<tabbar_item path="/cart">
						<template v-slot:img1>
							<img src="@/assets/img/tabbar/购物车.png" alt="">
						</template>
						<template v-slot:img2>
							<img src="@/assets/img/tabbar/购物车1.png" alt="">
						</template>
						<template v-slot:titel>
							<div>购物车</div>
						</template>
				</tabbar_item>
					<tabbar_item path="/user">
							<template v-slot:img1>
								<img src="@/assets/img/tabbar/用户中心.png" alt="">
							</template>
							<template v-slot:img2>
								<img src="@/assets/img/tabbar/用户中心1.png" alt="">
							</template>
							<template v-slot:titel>
								<div>用户中心</div>
							</template>
					</tabbar_item>
						
	</div>
</template>

<script>
	import tabbar_item from './tabbar_item.vue'
	export default({
		name:'tabbar',
		data(){
			return{
			}
		},
		components:{
			tabbar_item
		}
	})
</script>

<style>
	.tabbar{
		background-color: #f6f6f6;
		display: flex;
		
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;

	}
</style>
